import "./App.css";
import {Suspense} from "react"
import {createBrowserRouter, RouterProvider} from "react-router-dom"
import routes from "./routes"
import AuthGuard from "./components/AuthGuard"
import ErrorPage from "./components/ErrorPage"
import Loading from './components/Loading';
// import NotFound from "./components/NotFound"

// 为路由添加权限守卫（支持嵌套路由）
const createRoutesWithGuard = (routes) => {
  return routes.map(route => ({
    ...route,
    element: (
      <AuthGuard 
        element={route.element} 
        requiresAuth={route.requiresAuth} 
        roles={route.roles} 
      />
    ),
    // 递归处理子路由
    children: route.children ? createRoutesWithGuard(route.children) : undefined
  }));
};

// 创建路由实例
const router = createBrowserRouter(createRoutesWithGuard(routes), {
  errorElement: <ErrorPage /> // 全局错误页面
});

const App = () => {
  return (
    <Suspense fallback={<Loading />}>
      <RouterProvider router={router} />
    </Suspense>
  );
};

export default App;
